<template>
  <div class="renwu">
    <!-- 头部导航栏 -->
    <head-component
      :rightClick="rightClick"
      :rightIcon="rightIcon"
      title="我的任务"/>
    <div class="renwu_main">
      <!-- tab切换任务栏 -->
      <div class="renwu_tab">
        <div class="renwu_tab_list f32" :class="type === 1 && 'renwu_tab_active'" @click="stateClick(1)">审核中</div>
        <div class="renwu_tab_list f32" :class="type === 2 && 'renwu_tab_active'" @click="stateClick(2)">已完成</div>
        <div class="renwu_tab_list f32" :class="type === 3 && 'renwu_tab_active'" @click="stateClick(3)">已拒绝</div>
      </div>
      <!-- 内容区 -->
      <div class="renwu_details_box">
        <div class="renwu_list" v-for="(item, index) in renwuList" :key="index">
          <img class="renwu_list_left" :src="item.img" alt="">
          <div class="renwu_list_center">
            <div class="f32">{{item.name}}</div>
            <div class="f28 col_99 renwu_list_center_text">{{item.text}}</div>
            <div class="f24 col_99">时间:
              <span class="renwu_list_center_time">{{item.time}}</span>
            </div>
          </div>
          <div class="renwu_list_right" :class="type === 1 ? 'state1' : (type === 2 ? 'state2' : 'state3')">
            <img :src="type === 1 ? shenheIcon.icon1 : (type === 2 ? shenheIcon.icon2 : shenheIcon.icon3)" alt="">
            <div class="f28 col_ff">{{type === 1 ? '审核中' : (type === 2 ? '已完成' : '已拒绝')}}</div>
          </div>
        </div>
        <div class="renwu_tishi f24 col_999" v-if="type==1 && renwuList!=''">您提交的产品正在审核中,请耐心等待哦!</div>
        <div class="renwu_tishi f24 col_999" v-if="type==2 && renwuList!=''">恭喜您提交的产品审核通过了，佣金已发到你的钱包里，可随时提现，快去邀请好友赚取更多的佣金吧!</div>
        <div class="renwu_tishi f24 col_999" v-if="type==3 && renwuList!=''">很遗憾,您提交的产品审核未通过,快去做任务获取更多的佣金吧!</div>
        <!-- 如果内容列表为空 -->
        <div class="null_list" v-if="renwuList == ''">
          <img class="null_img" src="@/common/icon/nothing.png" alt="">
          <div class="null_title">暂无数据</div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import headComponent from '@/components/layout/head';
export default {
  name: '',
  components: {
    headComponent
  },
  data() {
    return {
      rightIcon: require('@/common/icon/user/add.png'),
      type: this.$route.params.type - 0,
      shenheIcon: { // 三种不同的图标状态
        icon1: require('@/common/icon/user/renwu1.png'),
        icon2: require('@/common/icon/user/renwu2.png'),
        icon3: require('@/common/icon/user/renwu3.png')
      },
      renwuList: []
    }
  },
  watch: {
    "$route.params.type" (val) {
      this.type = val - 0;
    }
  },
  mounted() {

    this.getNews();
  },
  methods: {
    alert(){
      if(this.type==2){
        this.$store.commit('alert', {
          title: '提示',
          text: '恭喜你提交的产品审核通过了，佣金已发到你的钱包里，可随时提现，快去邀请好友赚取更多的佣金吧!',
        bgCallback: () => { // 点击背景时的处理函数
          this.$store.commit('alert'); // 让弹框消失
        },
        callback: () => { // 点击确定后的处理函数
          console.log('确定操作');
          this.$store.commit('alert');
        },
        falseCallback: () => { // 点击取消后的处理函数
          console.log('取消操作');
          this.$store.commit('alert');
        }
      })
      }
    },
    getNews(){
      // this.alert();
      let $this = this;
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      let uid = localStorage.getItem('uid');
      let token = localStorage.getItem('token');
      let data = { u_id:uid, token:token, type:$this.type }
      $this.$axios.post('/index.php?m=user&c=my_task', data).then(res=>{
        t.clear();
        if(res.data.code === 1){
          $this.renwuList = res.data.data.map((item, index) => {
            const obj = {
              id: item.id,
              img:　item.p_img,
              text: item.p_title,
              time: item.t_addtime
            }
            return obj
          })
        }
      })
    },
    stateClick(val){
      this.type = val;
      this.$router.replace(`/renwu/${val}`)
      this.getNews();

    },
    rightClick(){ // 跳转上传凭证, 之前需实名认证
      let isRenzheng = localStorage.getItem("isRenzheng");
      if(isRenzheng == 0){
        this.$toast({
          message: '请先进行实名认证',
          duration: 800,
          onClose:()=>{
            this.$router.push('/renzheng')
          }
        })
        return;
      } else if(isRenzheng == 1){
        this.$router.push('/upload')
        return;
      }
    }

  },
}
</script>
<style lang="less">
  .renwu_main{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    // tab切换状态部分
    .renwu_tab{
      margin-top: 1.2rem;
      padding: 0 0.4rem;
      height: 1.2rem;
      display: flex;
      display:-webkit-flex;
      align-items: center;
      justify-content: space-around;
      .renwu_tab_active{
        color: #409aff;
        position: relative;
        &::before{
          content: '';
          position: absolute;
          bottom: -0.1rem;
          left: 28%;
          width: 44%;
          height: 0.053rem;
          background: #409aff;
        }
      }
    }
    // 内容部分
    .renwu_details_box{
      flex: 1;
      -webkit-flex: 1;
      background: #f5f5f5;
      padding: 0.4rem;
      overflow: scroll;
      .renwu_list{
        height: 2.4rem;
        width: 100%;
        background: #fff;
        margin-bottom: 0.4rem;
        border-radius: 0.3rem;
        -webkit-border-radius: 0.3rem;
        display: flex;
        display:-webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        .renwu_list_left{
          width: 1.3333rem;
          height: 1.3333rem;
          margin-left: 0.4rem;
          border-radius: 0.3rem;
          -webkit-border-radius: 0.3rem;
        }
        .renwu_list_center{
          flex: 1;
          -webkit-flex: 1;
          text-align: left;
          margin-left: 0.3333rem;
          .renwu_list_center_text{
            margin-top: 0.04rem;
            margin-bottom: 0.02rem;
          }
          .renwu_list_center_time{ margin-left: 0.05rem; }
        }
        .renwu_list_right{
          width: 2rem;
          height: 100%;
          display: flex;
          display:-webkit-flex;
          flex-direction: column;
          -webkit-flex-direction: column;
          align-items: center;
          -webkit-align-items: center;
          justify-content: center;
          -webkit-justify-content: center;
          border-top-right-radius: 0.3rem;
          -webkit-border-top-right-radius: 0.3rem;
          border-bottom-right-radius: 0.3rem;
          -webkit-border-bottom-right-radius: 0.3rem;
          img{ width: 0.54rem; height: 0.6rem; }
        }
        .state1{ background: linear-gradient(to bottom, #0bd6fc, #10d1fd, #3c9fff) }
        .state2{ background: linear-gradient(to bottom, #fcc504, #fdae14, #fe8034) }
        .state3{ background: linear-gradient(to bottom, #cbcaca, #c7c6c5, #c0bcbb) }
      }

    }
  }
  .renwu_tishi{
    width: 100%;
    color: #999;
    padding: 0 0.2rem;
    margin-top: 0.5rem;
  }

</style>
